/* global jQuery, document, window, envatoCustomSearch, envatoCustomSearchSettings */ jQuery(document).ready(function ($) { // Constants and state var defaultCategory = $('.dropdown-toggle').val(); var dataLayer = window.dataLayer || []; var typingTimer = 0; var doneTypingInterval = 300; // Initialize the search functionality function initializeSearch() { setupEventListeners(); initAutocomplete(); setupMobileHandlers(); } // Setup all event listeners function setupEventListeners() { $('#envato-search-form').on('submit', handleSearchSubmit); $('#url-input').on('keypress', handleKeyPress); $('.dropdown-toggle').on('click', handleDropdownToggle); $('.dropdown-item').on('click', handleDropdownItemClick); $('#url-input').on('input', handleInputChange); $('.clear-input').on('click', handleClearInput); $('.envato-custom-search').on('click', handleSearchClick); $(document).on('click', handleDocumentClick); $(document).on('mouseleave', '.dropdown-menu', handleDropdownMouseLeave); $('#url-input').on('focus', handleInputFocus); $(document).on('mousedown', '.ui-menu-item', handleMenuItemClick); $(window).on('resize', handleWindowResize); setupSearchTagsHandlers(); } // Search form handlers function handleSearchSubmit(e) { e.preventDefault(); processSearch('free text'); } function handleKeyPress(e) { if (e.which === 13) { e.preventDefault(); processSearch('free text'); } } // Dropdown handlers function handleDropdownToggle(e) { e.preventDefault(); $('.dropdown-menu').toggleClass('show'); } function handleDropdownItemClick(e) { e.preventDefault(); var selectedText = $(this).text().trim(); var selectedValue = $(this).data('value'); updateDropdownSelection(selectedText, selectedValue); updateSearchTagsVisibility(selectedValue); } function updateDropdownSelection(selectedText, selectedValue) { $('.dropdown-menu').removeClass('show'); updateDropdownItems(selectedText, selectedValue); updateDropdownButton(selectedText, selectedValue); } function updateDropdownItems(selectedText, selectedValue) { $('.dropdown-item').each(function () { if ($(this).data('value') === selectedValue) { $(this).html( selectedText + 'Envato Custom Search check' ); $(this).addClass('selected'); } else { $(this).html($(this).text().trim()); $(this).removeClass('selected'); } }); } function updateDropdownButton(selectedText, selectedValue) { var pluginUrl = envatoCustomSearch.pluginUrl; $('#dropdownMenuButton').val(selectedValue); $('.dropdown-toggle').html( '' + selectedText + 'Envato Custom Search" ); } // Input handlers function handleInputChange() { $('.clear-input').toggle($(this).val() !== ''); } function handleClearInput() { $('#url-input').val(''); $('.clear-input').hide(); } function handleSearchClick(e) { e.stopPropagation(); $(this).addClass('is-focused'); $('.envato-custom-search').css('outline', '2px solid #fff'); } function handleInputFocus() { $('.dropdown-menu').removeClass('show'); if ($(this).val().trim() !== '') { $(this).autocomplete('search', $(this).val()); } } // Document and window handlers function handleDocumentClick(e) { handleSearchFocus(e); handleDropdownClose(e); } function handleSearchFocus(e) { if (!$(e.target).closest('.envato-custom-search').length) { $('.envato-custom-search').removeClass('is-focused'); $('.envato-custom-search').css('outline', '1px solid #383838'); setupSearchHoverEffects(); } } function setupSearchHoverEffects() { $('.envato-custom-search').hover( function () { if (!$(this).hasClass('is-focused')) { $(this).css('outline', '1px solid #707070'); } }, function () { if (!$(this).hasClass('is-focused')) { $(this).css('outline', '1px solid #383838'); } } ); } function handleDropdownClose(e) { if (!$(e.target).closest('.dropdown-menu').length) { $('.dropdown-menu').removeClass('show'); } } function handleDropdownMouseLeave() { $('.dropdown-menu').removeClass('show'); } // Autocomplete functionality function initAutocomplete() { var $input = $('#url-input'); if ($input.data('ui-autocomplete')) { $input.autocomplete('destroy'); } $input .autocomplete({ minLength: 1, appendTo: '.envato-custom-search', position: { my: 'left top+3', at: 'left bottom', of: $('.envato-custom-search') }, source: handleAutocompleteSource, open: handleAutocompleteOpen, close: handleAutocompleteClose, select: handleAutocompleteSelect }) .keydown(handleAutocompleteKeydown) .data('ui-autocomplete')._renderItem = renderAutocompleteItem; } function handleAutocompleteSource(request, response) { clearTimeout(typingTimer); typingTimer = setTimeout(function () { var category = $('#dropdownMenuButton').val(); var url = 'https://autosuggest.aws.elements.envato.com/?keyword=' + request.term; if (category !== 'all-items') { url += '&itemType=' + category; } $.ajax({ url: url, success: function (data) { var suggestions = $.map(data, function (item) { return { label: item.term, value: item.term }; }); response(suggestions); } }); }, doneTypingInterval); } function handleAutocompleteOpen() { $('.ui-autocomplete').css('min-width', $('.envato-custom-search').outerWidth() + 'px'); $('.envato-custom-search').css('border-radius', '16px 16px 0 0'); } function handleAutocompleteClose() { $('.envato-custom-search').css('border-radius', '50px'); } function handleAutocompleteSelect(event, ui) { event.preventDefault(); $('#url-input').val(ui.item.value); if (ui.item.category) { var matchingItem = $('.dropdown-item[data-value="' + ui.item.category + '"]'); if (matchingItem.length) { $('#dropdownMenuButton').val(ui.item.category); $('.dropdown-toggle').html( matchingItem.text() + ' Envato Custom Search' ); } } processSearch('autocomplete'); $('#url-input').autocomplete('close').blur(); } function handleAutocompleteKeydown(event) { var $this = $(this); var menu = $this.autocomplete('widget'); var items = menu.find('.ui-menu-item'); var active = menu.find('.ui-state-active'); if (event.key === 'Tab' && menu.is(':visible')) { event.preventDefault(); if (active.length === 0) { items.first().addClass('ui-state-active'); } else { var next = active.next('.ui-menu-item'); active.removeClass('ui-state-active'); if (next.length) { next.addClass('ui-state-active'); } else { items.first().addClass('ui-state-active'); } } } } function handleMenuItemClick() { var item = $(this).data('ui-autocomplete-item'); if (item) { $('#url-input').val(item.value).trigger('change'); $('#url-input').autocomplete('close').blur(); processSearch('autocomplete'); } } function renderAutocompleteItem(ul, item) { return $('
  • ') .append( '
    Envato Custom Search' + item.label + '
    ' ) .appendTo(ul); } // Mobile handlers function setupMobileHandlers() { $('.search-mobile').on('click', function (e) { e.preventDefault(); e.stopPropagation(); toggleMobileSearch(true); }); $(document).on('click', function (e) { if ( isMobile() && $('.envato-custom-search').hasClass('expanded') && !$(e.target).closest('.envato-custom-search').length ) { toggleMobileSearch(false); } }); } function toggleMobileSearch(show) { if (show) { $('.envato-custom-search').addClass('expanded'); $('.search-mobile').css('display', 'none'); $('.envato-custom-search-image').hide(); $('#url-input').focus(); } else { $('.envato-custom-search').removeClass('expanded'); $('.search-mobile').css('display', 'flex'); $('.envato-custom-search-image').show(); } } function isMobile() { return window.innerWidth <= 1023; } // Search tags handlers function setupSearchTagsHandlers() { $('.search-tags-container, .search-tags-container-mobile').on('click', '.search-tag', handleSearchTagClick); } function handleSearchTagClick(e) { e.preventDefault(); var $this = $(this); var searchTerm = $this.text().trim(); var category = $('#dropdownMenuButton').val(); var itemCategory = category.replace(/-/g, ' '); trackSearchEvent('popular', searchTerm, category, itemCategory); window.open($this.attr('href'), '_blank'); } // Search processing function processSearch(searchType) { var input = $('#url-input').val(); var processedInput = input.replace(/ /g, '+'); var category = $('#dropdownMenuButton').val(); var itemCategory = category.replace(/-/g, ' '); trackSearchEvent(searchType, input, category, itemCategory); var baseUrl = 'https://elements.envato.com/' + category + '/' + processedInput + '/' + envatoCustomSearchSettings.url_posterior_term; window.open(baseUrl, '_blank'); } function trackSearchEvent(searchType, searchTerm, category, itemCategory) { if (window.dataLayer) { dataLayer.push({ event: 'track_event', event_name: 'search', event_attributes: { category: category, context: 'header', context_detail: searchType === 'popular' ? 'chip' : 'search bar', custom_timestamp: Date.now(), event_type: 'user', item_category: itemCategory, page_type: 'marketing landing', search_term: searchTerm, search_type: searchType } }); } } // Window resize handler function handleWindowResize() { var currentCategory = $('#dropdownMenuButton').val(); if (!isMobile()) { toggleMobileSearch(false); if (currentCategory === defaultCategory) { $('.search-tags-container').show(); $('.search-tags-container-mobile').hide(); } } else { if (currentCategory === defaultCategory) { $('.search-tags-container').hide(); $('.search-tags-container-mobile').show(); } } } function updateSearchTagsVisibility(selectedValue) { if (selectedValue === defaultCategory) { if (isMobile()) { $('.search-tags-container-mobile').show(); $('.search-tags-container').hide(); } else { $('.search-tags-container').show(); $('.search-tags-container-mobile').hide(); } } else { $('.search-tags-container, .search-tags-container-mobile').hide(); } } // Initialize the search functionality initializeSearch(); });